<template>
  <div class="animated fadeIn">
    <div class="row">
      <div class="col-md-12">
        <b-card>
          <div slot="header">
            <strong>{{ solName }}</strong>
          </div>
          <form @submit.prevent="formSubmit" ref="df">
            <b-form-fieldset label="标题：" :label-cols="2" :horizontal="true">
              <b-form-input type="text" placeholder="" v-model="solList.des" name="desc"></b-form-input>
              <span class="tips">*</span>
              <p class="tips" v-show="solTip1">内容不能为空，请输入！</p>
            </b-form-fieldset>
            <b-form-fieldset label="标题详情：" :label-cols="2" :horizontal="true">
              <b-form-input type="text" placeholder="" v-model="solList.designation" name="designation"></b-form-input>
              <span class="tips">*</span>
              <p class="tips" v-show="solTip2">内容不能为空，请输入！</p>
            </b-form-fieldset>
            <b-form-fieldset label="内容详细：" :label-cols="2" :horizontal="true">
              <textarea class="form-control" :rows="3" placeholder="" v-model="solList.content" name="content"></textarea>
              <span class="tips">*</span>
              <p class="tips" v-show="solTip3">内容不能为空，请输入！</p>
            </b-form-fieldset>
            <b-form-fieldset label="大图(1280x320)：" :label-cols="2" :horizontal="true">
              <!-- <b-form-input type="text" placeholder="" v-model="solList.image1" name="image1"></b-form-input> -->
              <upload :src.sync="solList.image1"></upload>
              <span class="tips">*</span>
              <p class="tips" v-show="solTip4">内容不能为空，请输入！</p>
            </b-form-fieldset>
            <b-form-fieldset label="小图(486x180)：" :label-cols="2" :horizontal="true">
              <!-- <b-form-input type="text" placeholder="" v-model="solList.image2" name="image2"></b-form-input> -->
              <upload :src.sync="solList.image2"></upload>
              <span class="tips">*</span>
              <p class="tips" v-show="solTip5">内容不能为空，请输入！</p>
            </b-form-fieldset>
            <b-form-fieldset label="缩略图(90x50)：" :label-cols="2" :horizontal="true">
              <!-- <b-form-input type="text" placeholder="" v-model="solList.image3" name="image3"></b-form-input> -->
              <upload :src.sync="solList.image3"></upload>
              <span class="tips">*</span>
              <p class="tips" v-show="solTip6">内容不能为空，请输入！</p>
            </b-form-fieldset>
            <b-form-fieldset label="创建时间：" :label-cols="2" :horizontal="true" v-show="isShowTime">
              <b-form-input type="text" :disabled="true" placeholder="" v-model="solList.createtime" name="createtime"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="更新者：" :label-cols="2" :horizontal="true">
              <b-form-input type="text" :disabled="true" placeholder="" v-model="solList.updateUser" name="updateUser"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="更新时间：" :label-cols="2" :horizontal="true" v-show="isShowTime">
              <b-form-input type="text" :disabled="true" placeholder="" v-model="solList.updatetime" name="updatetime"></b-form-input>
            </b-form-fieldset>
            <div slot="footer">
              <b-button type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> 提交 </b-button>
            </div>
          </form>
        </b-card>
      </div>
    </div>

    <div title="Modal title" class="modal-primary" v-model="primaryModal" v-show="primaryModal">
      <span class="modal-open">
        <div class="modal fade show" role="dialog">
          <div class="modal-dialog modal-md">
            <div tabindex="-1" role="document" class="modal-content">
              <header class="modal-header">
                <h5 class="modal-title" v-model="modalTitle">{{ modalTitle }}</h5>
                <button type="button" aria-label="Close" class="close" @click="cancelModal()">
                  <span aria-hidden="true">×</span>
                </button>
              </header>
              <div class="modal-body" v-model="modalBody">
                <br>{{ modalBody}}<br><br>
              </div>
              <footer class="modal-footer">
                <button type="button" class="btn btn-primary btn-md" @click="cancelModal()">取消</button>
                <button type="button" class="btn btn-danger btn-md" @click="addUpdateSol()">确认</button>
              </footer>
            </div>
          </div>
        </div>
        <div class="modal-backdrop fade show"></div>
      </span>
    </div>
  </div>
</template>

<script>
  import {formatDate} from '../../service/date'
  import { findSolutionById, updateSolution, addSolution } from '../../service/api'
  import Upload from '../../components/Upload.vue'
  export default {
    components: {
      Upload
    },
    name: 'forms',
    data () {
      return {
        solList: {
          image1: '',
          image2: '',
          image3: ''
        },
        solName: '方案详情',
        modalTitle: '',
        modalBody: '',
        des: '',
        designation: '',
        content: '',
        image1: '',
        image2: '',
        image3: '',
        createtime: '',
        updateUser: '',
        updatetime: '',
        primaryModal: false,
        solTip1: false,
        solTip2: false,
        solTip3: false,
        solTip4: false,
        solTip5: false,
        solTip6: false,
        isShowTime: false
      }
    },
    methods: {
      backSolClassify () {
        this.$router.push({
          path: '/solution/s_classify'
        })
      },
      cancelModal () {
        this.primaryModal = false
      },
      sureAddSol () {
        this.primaryModal = true
      },
      tellInfo () {
        if (this.solList.des === undefined || !this.solList.des.trim()) {
          this.solTip1 = true
          return false
        } else {
          this.solTip1 = false
        }
        if (this.solList.designation === undefined || !this.solList.designation.trim()) {
          this.solTip2 = true
          return false
        } else {
          this.solTip2 = false
        }
        if (this.solList.content === undefined || !this.solList.content.trim()) {
          this.solTip3 = true
          return false
        } else {
          this.solTip3 = false
        }
        if (this.solList.image1 === undefined || !this.solList.image1.trim()) {
          this.solTip4 = true
          return false
        } else {
          this.solTip4 = false
        }
        if (this.solList.image2 === undefined || !this.solList.image2.trim()) {
          this.solTip5 = true
          return false
        } else {
          this.solTip5 = false
        }
        if (this.solList.image3 === undefined || !this.solList.image3.trim()) {
          this.solTip6 = true
          return false
        } else {
          this.solTip6 = false
        }
        return true
      },
      formSubmit () {
        if (this.$route.query.flag === '1') {
          if (this.tellInfo()) {
            this.primaryModal = true
            this.modalTitle = '修改方案'
            this.modalBody = '是否修改该条方案?'
          }
        }
        if (this.$route.query.flag === '2') {
          if (this.tellInfo()) {
            this.primaryModal = true
            this.modalTitle = '添加方案'
            this.modalBody = '是否添加该条方案?'
          }
        }
      },
      async addUpdateSol () {
        if (this.$route.query.flag === '1') {
          const df = this.$refs.df
          const fd = new FormData(df)
          fd.append('id', this.$route.query.id)
          fd.append('user', localStorage.getItem('username'))
          const { image1, image2, image3 } = this.solList
          fd.append('image1', image1)
          fd.append('image2', image2)
          fd.append('image3', image3)
          console.log(localStorage.getItem('username'))
          const { err, data } = await updateSolution({ fd })
          if (err || data.code !== 200) {
            alert('修改失败！')
            return false
          }
          this.primaryModal = false
          alert('修改成功！')
          this.$router.go(-1)
        }
        if (this.$route.query.flag === '2') {
          const df = this.$refs.df
          const fd = new FormData(df)
          fd.append('user', localStorage.getItem('username'))
          const { err, data } = await addSolution({ fd })
          if (err || data.code !== 200) {
            alert('添加失败！')
            return false
          }
          this.primaryModal = false
          alert('添加完成！')
          this.$router.go(-1)
        }
      }
    },
    created () {
      if (this.$route.query.flag === '1') {
        this.isShowTime = true
        this.solName = '修改方案'
        findSolutionById({id: this.$route.query.id})
          .then(({ data, err }) => {
            console.log('data: ' + data)
            console.log('err: ' + err)
            if (data.code === 200) {
              this.solList = data.result
              if (data.result.updatetime !== null) {
                this.solList.updatetime = data.result.updatetime.time
                const datas = formatDate(new Date(data.result.updatetime), 'yyyy-MM-dd hh:mm:ss')
                this.solList.updatetime = datas
              }
            }
          })
      }
      if (this.$route.query.flag === '2') {
        this.isShowTime = false
        this.solName = '添加方案'
        this.solList.updateUser = localStorage.getItem('username')
      }
    }
  }
</script>
<style type="text/scss" rel="stylesheet/scss" lang="scss" scoped>
  @import "../../styles/common";
  .form-control {
    display: inline-block;
    width: 95%;
  }
</style>
